<template>
  <div class="hello">
    <div>--router-view--</div>
    我是绿色,我是一级路由地址的组件内容; 在我之下是二级路由地址装载的组件位置;
    <h1>{{ greeting }}</h1>
    <button @click="changeGreeting">Change Greeting</button>
   
    <p>Count: {{ store.state.count }}</p>
    <button @click="increment">Increment</button>
    <button @click="incrementAsync">Increment Async</button>
    <p>{{ $t('message') }}</p>
    <p>{{ $t('greeting') }}</p>
    <button @click="toggle('zh')">切换成中文</button>
    <button @click="toggle('en')">切换成英文</button>
  </div>
  </template>

<script>
import { defineComponent, ref, onMounted } from 'vue';
import { useStore } from 'vuex';
import { useI18n } from 'vue-i18n';
import { getUser } from "@/api/index";

export default defineComponent({
  props: {
    // props 配置
    message: {
      type: String,
      required: true
    }
  },
  // setup 函数是 Composition API 的核心部分，它用于替代 Vue 2.x 中的 data、computed、methods 等选项。
  // setup 函数是函数式的，它返回一个对象，该对象包含了组件内部的状态、方法等
  setup(props) {
    
    const { locale: i18nLanguage } = useI18n()
    
    const toggle = (languageKey) => {
      i18nLanguage.value = languageKey  // zh en
    } 


    // 生命周期钩子
    // onBeforeMount: 在组件挂载之前调用。
    // onBeforeUpdate: 在组件更新之前调用。
    // onUpdated: 在组件更新之后调用。
    // onBeforeUnmount: 在组件销毁之前调用。
    // onUnmounted: 在组件销毁之后调用。

    // 使用 onMounted 钩子，在组件挂载后执行
    onMounted(() => {
      getUser()
        .then((res) => {
          console.log(res)
        })
        .catch((err) => {
          console.log(err, "err");
        });

      console.log('Component is mounted');
    });

    // 声明响应式数据
    const greeting = ref('Hello, Vue 3!');

    // 定义方法
    const changeGreeting = () => {
      greeting.value = 'Hello, Vue 3 Changed!';
    };

    // 访问外部传递的属性
    console.log(props.message);

    // 使用vuex store
    const store = useStore();
    const increment = () => {
      store.commit('increment');
    };
    const incrementAsync = () => {
      store.dispatch('incrementAsync');
    };

    return {
      // 返回组件需要的属性和方法
      store,
      increment,
      incrementAsync,
      greeting,
      changeGreeting,
      toggle
    };
  }
});
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
